<template>
  <section class="reportList container noBgColor">
    <el-row :gutter="40" type="flex" justify="space-between">
      <el-col :span="12">
        <div class="flex-box">
          <el-input
            v-model="condition.keyword"
            class="fl"
            placeholder="请输入内容"
            prefix-icon="el-icon-search el-input__icon"
            @blur="fetchData"
            @keyup.enter.native="fetchData"
          />
        </div>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="$router.push({name:'uploadResearchReport'})">添加</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="listBox searchCon">
      <el-col v-for="(item,index) in list" :key="index" :span="6" class="lesson_list_Con">
        <ReportList :list="item" />
      </el-col>
    </el-row>

    <Pagination
      :total="total"
      :limit="12"
      :float="'right'"
      class="pagination"
      @pagination="pagination"
    />
  </section>
</template>

<script>
import Pagination from '@/components/Pagination'
//  import LessonList from '@/components/LessonList'
import ReportList from './components/reportList'
export default {
  name: 'Reports',
  components: {
    // noPerpare,
    ReportList,
    Pagination
  },
  data () {
    return {
      listQuery: {
        pager: this.$store.state.app.pager
      },
      condition: { keyword: '' }
    }
  },
  computed: {
    list () {
      const info = this.$store.state.teachingResearch.teachReportInfo
      this.total = info.total ? info.total : 0
      return info.records
    }
  },
  watch: {

  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.condition.keyword = this.condition.keyword ? this.condition.keyword : null
      const params = {
        condition: this.condition,
        pager: {
          page: 1,
          pageSize: 12
        }
      }
      this.$store.dispatch('teachingResearch/reportPage', params)
    },
    pagination ({ page, limit }) {
      this.listQuery.pager.page = page
      this.listQuery.pager.pageSize = limit
      this.fetchData(this.condition)
    }
  }
}
</script>
<style lang="scss" scoped>
$bg: #2eb06f;
$gray: #e6f5ed;
$labg: #ddeae4;
$textColr-2: rgba(0, 0, 0, 0.45);

.reportList {
  // padding: 24px 40px;
  .searchCon {
    line-height: 1.8;
    .lesson_list_Con {
      i,
      .labelSpan {
        color: $textColr-2;
        font-size: 12px;
      }
    }
  }
}
</style>
